<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性与监听器</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div class="d1">
    原始字符串：{{message}} <br>
    <h1>1. 默认取得计算属性的值<hr></h1>
    成绩: {{scoreLevel}} <br>
    反转字符串后：{{reverseMessage}} <br>
    <h1>2. 修改计算属性的值<hr></h1>
    姓名：{{fullName}} <br>
    <button @click="setFullname1">设置fullname(修改计算属性的值)</button>
  </div>
</body>
</html>
<script>
  let vs = new Vue({
    // 1. 定义视图层的选择器
    el: '.d1',
    // 2. 定义模型数据
    data:{
      score: 98,
      message: 'hello,vue',
      firstName: '张',
      lastName: '三',
    },
    // 3. 定义普通方法
    methods:{
      // 当调用此方法时，计算属性fullName的set（）方法自动调用。
      setFullname1(){
        this.fullName = '李 四'
      }
    },
    // 4. 定义计算属性
    computed:{
       // 4.1 根据成绩打印评语信息
      scoreLevel(){
        let info = ''
        if (this.score >= 90){
          info = '优秀'
        }else if(this.score >= 80){
          info = '良好'
        }else if (this.score >= 70){
          info = '一般'
        }else if (this.score >= 60){
          info = '及格'
        }else{
          info = '不及格'
        }
        return info
      },
      // 4.2 反转字符串
      reverseMessage(){
        return this.message.split('').reverse().join("")
      },
      // 4.3 获取人的全名称
      fullName: {
        // 4.3.1 定义计算属性的读方法（默认自动调用）
        get() {
          return this.firstName + " " + this.lastName
        },
        // 4.3.2 如果要设置计算属性的值，则需要定义set方法
        set(value) {
          const fullName = value.split(" ")
          this.firstName = fullName[0]
          this.lastName = fullName[1]
        }
      }
    },
    // 5. 定义监听属性
    watch:{

    }
  })
</script>
